<%--
Created by IntelliJ IDEA.
User: xiaomi
Date: 2019/5/14
Time: 9:34
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>用户列表</title>
    <link rel="stylesheet" type="text/css" href="themes/metro/easyui.css">
    <link rel="stylesheet" type="text/css" href="themes/icon.css">
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="js/easyui-lang-zh_CN.js"></script>
</head>
<body>
<table id="dg"></table>

<div id="toolbar">
    <div class="search-div">
        <label>姓名：</label>
        <input type="text"  name="realName" id="search-realName" />
        <label>部门：</label>
        <input  name="deptNo" id="search-deptNo">
        <a href="#" class="easyui-linkbutton" iconCls="icon-search" id="searchBtn">搜索</a>
    </div>
    <a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" id="addBtn">新增</a>
    <a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true" id="editBtn">编辑</a>
    <a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true" id="batchDelBtn">批量删除</a>
</div>

<div id="dd" class="easyui-dialog" title="添加/修改用户" style="width:400px;height:200px;"
     data-options="iconCls:'icon-save',resizable:true,modal:true,closed:true,buttons:'#bb'">
    <form id="ff" method="post">
        <table>
            <tr>
                <td><label for="deptNo">部门</label></td>
                <td><input  name="deptNo" id="deptNo"></td>
            </tr>
            <tr>
                <td> <label for="loginName">登录名:</label></td>
                <td><input class="easyui-validatebox" type="text" name="loginName" id="loginName" data-options="required:true" /></td>
            </tr>
            <tr>
                <td><label for="realName">真实姓名:</label></td>
                <td><input class="easyui-validatebox" type="text" name="realName" id="realName" data-options="required:true" /></td>
            </tr>
            <tr>
                <td> <label for="email">邮箱:</label></td>
                <td><input class="easyui-validatebox" type="text" name="email" id="email" data-options="validType:'email'" /></td>
            </tr>
        </table>
    </form>

</div>
<div id="bb">
    <a href="#" class="easyui-linkbutton" id="dlg-save">保存</a>
    <a href="#" class="easyui-linkbutton" id="dlg-close">关闭</a>
</div>

<script>
    var url="add";

    // 点击搜索按钮的时候,按条件分页查询数据
    $("#searchBtn").click(function () {
        var deptNo = $("#search-deptNo").val();
        // 查询参数
        var data={
            realName:$("#search-realName").val(),
            deptNo: (deptNo==""?0:deptNo)
        }
        // 调用datagrid的load方法重新加载数据,传入的参数是data
        $("#dg").datagrid("load",data);
    });


    // 批量删除按钮的单击操作
    $("#batchDelBtn").click(function () {
        // getSelections获取选中的所有行  返回所有选中的行，当没有选中的记录时，将返回空数组。
        var rows = $("#dg").datagrid("getSelections");
        if( rows.length > 0 ){
            // 有数据
            //[{name:"id",value:1},{name:"id",value:2}]
            var idArray =[];
            for(var i =0;i<rows.length;i++){
                //idArray[i] ={name:"userNo",value:rows[i].userNo };
                idArray.push(rows[i].userNo);
            }
            //alert(idArray[0]+"   "+idArray[1]);
            // 使用ajax发送要删除的id到数据库
            $.ajax({
                url:"Delete",
                //  data: idArray,
                data:"userNo="+idArray,
                dataType:"json",
                success:function (data) {
                    if(data==="true"){
                        $.messager.alert('操作提示','删除成功！','info');
                        $("#dg").datagrid("reload");
                    }
                }
            });
        }else{ // 没有数据的时候
            $.messager.alert('操作提示','请先选中要删除的行！','warn');
        }
    });

    //修改
    $("#editBtn").click(function () {
        // 获取选中的行  返回第一个选中的行或者 null。
        var row = $('#dg').datagrid("getSelected");
        console.info(row);
        // 显示在表单中修改
        if(row){
            url="Update?userNo="+row.userNo;
            $('#ff').form("reset").form('load',row);
            $("#dd").dialog("open");
        }else{
            $.messager.alert('操作提示','请先选中要修改的行！','warn');
        }
    });
    //保存按钮
    $("#dlg-save").click(function () {

        $('#ff').form('submit', {
            url:url,
            success:function(data){
                //alert(data)
                data = JSON.parse(data);
                if(data.success){
                    $("#dd").dialog("close");
                    // 调用reload方法刷新当前页面的数据
                    $('#dg').datagrid("reload");
                    $.messager.alert('操作提示','操作成功！','info');
                }
            }
        });
    });
    //关闭按钮
    $("#dlg-close").click(function () {
        $("#dd").dialog("close");
    });
    //添加
    $("#addBtn").click(function () {
        url="add";
        $('#ff').form('reset');
        $("#dd").dialog("open",true);
    });

    //下拉框
    $("#search-realName").textbox({});
    // 使用js把id为deptNo的输入框转为下拉列表
    $("#search-deptNo,#deptNo").combobox({
        url:"Dept",
        valueField:"depID",
        textField:"depName"
    });

    // 调用 datagrid 方法把id为dg的标签转为 datagrid 组件
    $('#dg').datagrid({
        url:'ChaXun',
        fit:true,
        fitColumns:true,
        toolbar:"#toolbar",
        pagination:true,
        //singleSelect:true,
        pageSize:5,
        pageList:[5,10,15,20],
        // 指定表格中的列
        columns:[[
            // 每一个{}的信息就表示一个列
            // field: 表示要显示的数据的属性名
            // title: 列的标题
            {field:'userNo',title:'编号',checkbox:true},
            {field:'loginName',title:'登录名',width:100},
            {field:'realName',title:'真实姓名',width:100},
            {field:'email',title:'邮箱',width:100,align:'right'},
            //{field:'DepID',title:'部门编号',width:100,align:'right'}
        ]]
    });
</script>

</body>
</html>

